<template>
  <view class="container">
    <view class="header">
      <view class="title">选择楼层</view>
      <view class="location">
        <text>{{ libraryName }}</text>
        <text class="separator">></text>
        <text>{{ areaName }}</text>
      </view>
    </view>
    
    <view class="floor-list">
      <view 
        class="floor-item" 
        v-for="(floor, index) in floorList" 
        :key="index"
        @click="selectFloor(floor)"
      >
        <view class="floor-name">{{ floor.name }}</view>
        <view class="floor-desc">{{ floor.description }}</view>
        <view class="floor-status">
          <text class="status-text" :class="{'status-available': floor.availableSeats > 0}">
            {{ floor.availableSeats > 0 ? '有空位' : '已满' }}
          </text>
          <text class="seats-count">{{ floor.availableSeats }}/{{ floor.totalSeats }}</text>
        </view>
        <uni-icons type="right" size="16" color="#999"></uni-icons>
      </view>
    </view>
    
    <view class="no-data" v-if="floorList.length === 0">
      <image src="/static/images/no-data.png" mode="aspectFit"></image>
      <text>暂无楼层数据</text>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      areaId: '',
      areaName: '',
      libraryId: '',
      libraryName: '',
      floorList: []
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  onLoad(options) {
    if (options.id && options.libraryId) {
      this.areaId = options.id
      this.areaName = options.name || '区域'
      this.libraryId = options.libraryId
      this.libraryName = options.libraryName || '图书馆'
      this.getFloorList()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    getFloorList() {
      uni.showLoading({
        title: '加载中...'
      })
      
      this.$http.get(`/api/areas/${this.areaId}/floors`, {
        headers: {
          'Authorization': `Bearer ${this.token}`
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.floorList = res.data.data
        } else {
          uni.showToast({
            title: res.data.message || '获取楼层列表失败',
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.showToast({
          title: '网络错误，请稍后再试',
          icon: 'none'
        })
        console.error(err)
      }).finally(() => {
        uni.hideLoading()
      })
    },
    selectFloor(floor) {
      if (floor.availableSeats <= 0) {
        uni.showToast({
          title: '该楼层已满，请选择其他楼层',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/reserve/seat?id=${floor.id}&name=${floor.name}&areaId=${this.areaId}&areaName=${this.areaName}&libraryId=${this.libraryId}&libraryName=${this.libraryName}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .location {
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    
    .separator {
      margin: 0 10rpx;
      color: #999;
    }
  }
}

.floor-list {
  .floor-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    position: relative;
    
    .floor-name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .floor-desc {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .floor-status {
      display: flex;
      align-items: center;
      
      .status-text {
        font-size: 24rpx;
        color: #ff4d4f;
        background-color: rgba(255, 77, 79, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        margin-right: 20rpx;
        
        &.status-available {
          color: #52c41a;
          background-color: rgba(82, 196, 26, 0.1);
        }
      }
      
      .seats-count {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    uni-icons {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
